<template>
  <canvas class="arc-line__line" width="0">
  </canvas>
</template>
<script>
import { Component } from './drawLine.js'
export default {
  props: {
    linkInfo: Object
  },
  data () {
    return {
      boxSize: {
        width: 500,
        height: 76,
        offset: 15
      },
      lineStyle: {
        color: '#9ad2ec',
        width: 1
      },
      arcStyle: {
        radius: 12,
        width: 26,
        hoverColor: '#138DC7'
      },
      ctx: null,
      clickCanvas: true,
      cavTop: 0,
      cavLeft: 0,
      clickArcPid: 100
    }
  },
  mounted () {
    this.ctx = this.$el.getContext('2d')
    this.makeArc(this.linkInfo)
    this.$el.addEventListener('mousemove', this.mousemoveCallback)
    this.$el.addEventListener('mouseout', this.onmouseoutCallback)
    this.arcCanvasEvent(this.$el, this.ctx, { node: this.linkInfo.canvasNode, postion: { cavTop: this.cavTop, cavLeft: this.cavLeft } })
  },
  methods: {
    mousemoveCallback (e) {
      this.$el.style.display = 'block'
      this.makeArc(this.linkInfo, this.arcStyle.hoverColor)
    },
    onmouseoutCallback (e) {
      if (this.$store.state.bot.botdesignArcPidFlag !== e.target.getAttribute('pid')) {
        this.makeArc(this.linkInfo)
        this.$el.style.display = 'none'
      } else {
        this.$el.style.display = 'block'
        this.makeArc(this.linkInfo, this.arcStyle.hoverColor)
      }
      //  else this.makeArc(this.linkInfo, this.arcStyle.hoverColor)
    },
    getCavlocation (thatLine) {
      let spaceX, spaceY
      spaceX = Math.abs(thatLine.canvas[0][0] - thatLine.canvas[1][0])
      spaceY = Math.abs(thatLine.canvas[0][1] - thatLine.canvas[1][1]) - this.boxSize.height
      // spaceX = 0
      // spaceY = Math.abs(startPoint[1] - endPoint[1]) - boxSize.height
      // let cavTop, cavLeft
      this.cavTop = thatLine.canvas[0][1] + this.boxSize.height
      if (thatLine.canvas[0][0] > thatLine.canvas[1][0]) {
        this.cavLeft = thatLine.canvas[1][0] + this.boxSize.width / 2 + spaceX - (this.arcStyle.width / 2)
      } else if (thatLine.canvas[0][0] < thatLine.canvas[1][0]) {
        this.cavLeft = thatLine.canvas[0][0] + this.boxSize.width / 2 - this.arcStyle.width / 2
      } else {
        this.cavTop = thatLine.canvas[0][1] + this.boxSize.height + spaceY / 4
        this.cavLeft = thatLine.canvas[0][0] + this.boxSize.width / 2 - this.arcStyle.width / 2
      }
    },
    makeArc  (thatLine, color) {
      if (thatLine.arc) { return false }
      this.getCavlocation(thatLine)
      this.$el.width = 26
      this.$el.height = 26
      this.$el.style.top = this.cavTop + 'px'
      this.$el.style.left = this.cavLeft + 'px'
      this.$el.classList.add(`mystyle`)
      this.$el.setAttribute('pid', thatLine.canvasNode[1].id)
      this.$el.classList.add(`mystyle${thatLine.canvasNode[1].id}`)
      if (this.$el.getContext) {
        this.ctx.beginPath()
        this.ctx.lineWidth = 1
        this.ctx.strokeStyle = color || this.lineStyle.color
        this.ctx.arc(this.arcStyle.width / 2, this.arcStyle.width / 2, this.arcStyle.radius, 0, Math.PI * 2, false)
        this.ctx.stroke()
        this.repeatBeginPath(this.ctx)
      }
    },
    // let flag = true
    arcCanvasEvent  (canvas, ctx, lacation) {
      let that = this
      canvas.addEventListener('click', function (e) {
        that.$store.commit('BOTDESIGNARCSTATUS', e.target.getAttribute('pid'))
        e.stopPropagation()
        that.domHandel(e)
        Component.$emit('botBlockBut', lacation)
        that.clickCanvas = false
        that.makeArc(that.linkInfo, that.arcStyle.hoverColor)
      })
    },
    domHandel (e) {
      document.querySelector('.fixed_arc-line').style.display = 'none'
      document.querySelectorAll('.mystyle').forEach((element, i) => {
        element.style.display = 'none'
      })
      e.target.style.display = 'block'
    },
    repeatBeginPath (cxt) {
      cxt.beginPath()
      cxt.moveTo(this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.lineTo(this.arcStyle.width / 2, this.arcStyle.width / 4)
      cxt.stroke()
      cxt.beginPath()
      cxt.moveTo(this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.lineTo(this.arcStyle.width / 2, this.arcStyle.width / 4 + this.arcStyle.width / 2)
      cxt.stroke()
      cxt.beginPath()
      cxt.moveTo(this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.lineTo(this.arcStyle.width / 4, this.arcStyle.width / 2)
      cxt.stroke()
      cxt.beginPath()
      cxt.moveTo(this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.lineTo(this.arcStyle.width / 4 + this.arcStyle.width / 2, this.arcStyle.width / 2)
      cxt.stroke()
    }
  }
}
</script>
<style>
  .arc-line__line{
    position: absolute;
    cursor: pointer;
    background-color: #fff;
    display: none;
  }
</style>
